<template>
    <div class="homeMain">
        <div class="mask"></div>
        <div class="homeMainLeft">
            <div class="item1">
                <item title="设备统计" :delay="0.5">
                    <item5></item5>
                </item>
            </div>
            <!-- <div class="item1">
                <item title="设备报警排名" :delay="0.5">
                    <item2></item2>
                </item>
            </div> -->
            <div class="item1">
                <item title="工单统计" :delay="1">
                    <item1></item1>
                </item>
            </div>
            <div class="item1">
                <item title="工单统计" :delay="1">
                    <!-- <item1></item1> -->
                </item>
            </div>
            <div class="item1">
                <item title="工单统计" :delay="1">
                    <!-- <item1></item1> -->
                </item>
            </div>
        </div>
        <div class="homeMainCenter">
            <div class="homeMainCenterBottom">
                <item8></item8>
            </div>
        </div>
        <div class="homeMainRight">
            <div class="item1">
                <item title="组态统计" :delay="0.5">
                    <item11></item11>
                </item>
            </div>
            <div class="item1">
                <item title="组态统计" :delay="0.5">
                    <item11></item11>
                </item>
            </div>
            <div class="item1">
                <item title="组态统计" :delay="0.5">
                    <item11></item11>
                </item>
            </div>
            <!-- <div class="item1">
                <item title="泵房统计" :delay="0.5">
                    <item5></item5>
                </item>
            </div> -->
            <div class="item1">
                <item title="告警统计" :delay="1">
                    <!-- <baojing></baojing> -->
                </item>
            </div>
        </div>
    </div>
</template>

<script>
import WOW from "wow.js";
import tab from "@/components/tab/index.vue";
import item from "@/components/item/index.vue";
import item1 from '@/components/item1/index.vue';
import item2 from '@/components/item2/index.vue';
import item3 from '@/components/item3/index.vue';
import item4 from '@/components/item4/index.vue';
import item5 from '@/components/item5/index.vue';
import item6 from '@/components/item6/index.vue';
import item7 from '@/components/item7/index.vue';
import item8 from '@/components/item8/index.vue';
import item11 from '@/components/item11/index.vue';
import baojing from '@/components/baojing/index.vue';
export default {
    data() {
        return {}
    },
    components: {
        tab,
        item,
        item1,
        item2,
        item3,
        item4,
        item5,
        item6,
        item7,
        item8,
        item11,
        baojing
    },
    mounted() {
        var wow = new WOW({
            boxClass: "wow",
            animateClass: "animated",
            offset: 0,
            mobile: true,
            live: true,
            callback: function (box) {
            },
            scrollContainer: null,
            resetAnimation: true,
        });
        wow.init();
    },
}
</script>

<style lang="scss" scoped>
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/mask.png");
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 1;
}

.home {
    width: 100%;
    position: fixed;
    height: 100%;
    background: url("../assets/bg.jpg") no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
}

.homeMain {
    position: relative;
    width: (100%);
    height: (100%);
    display: flex;
    margin-top: 0px;
    // margin-left: 30px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    // margin-top: 40px;

    .homeMainLeft {
        width: 23%;
        position: absolute;
        height: 100%;
        //   display: flex;
        //   justify-content: space-between;
        //   align-items: center;
        //   flex-wrap: nowrap;
        //   flex-direction: column;
        //   align-content: flex-start;
        z-index: 4;

        .item1 {
            width: 100%;
            position: relative;
            height: calc(25% - 10px);
        }

        .item2 {
            width: 100%;
            height: calc(50% - 20px);
            position: relative;
        }
    }

    .homeMainCenter {
        width: 100%;
        position: relative;
        height: 100%;
        //   display: flex;
        //   justify-content: space-between;
        //   align-items: center;
        //   flex-wrap: nowrap;
        //   flex-direction: column;
        //   align-content: flex-start;

        .homeMainCenterTop {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: nowrap;
            flex-direction: row;
            align-content: flex-start;
            width: 100%;
            height: 120px;
        }

        .homeMainCenterBottom {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: nowrap;
            flex-direction: row;
            align-content: flex-start;
            width: 100%;
            height: calc(100% - 120px);
            position: relative;
        }
    }

    .homeMainRight {
        width: 23%;
        position: absolute;
        float: right;
        right: 2%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: column;
        align-content: flex-start;
        z-index: 4;

        .item1 {
            width: 100%;
            height: (25%);
            position: relative;
        }
        .item2 {
            width: 100%;
            height: calc(60% - 10px);
            position: relative;
        }

    }
}
</style>